<div class="content">
  <div class="default-header">
    <h1>Installed software</h1>
  </div>
  <div class="default-content">
    <div class="container mat-elevation-z8">
      <mat-table #table [dataSource]="dataSource">
        <ng-container matColumnDef="name">
          <mat-header-cell *matHeaderCellDef> Name </mat-header-cell>
          <mat-cell *matCellDef="let row">
            <ng-container *ngIf="row.type !== 'adbutler'">
              {{ row.name }}
            </ng-container>

            <ng-container *ngIf="row.type === 'adbutler'">
              <app-adbutler theme="dark"></app-adbutler>
            </ng-container>
          </mat-cell>
        </ng-container>

        <ng-container matColumnDef="actions">
          <mat-header-cell *matHeaderCellDef></mat-header-cell>
          <mat-cell *matCellDef="let row" style="text-align: right">
            <app-install-software
              [software]="row"
              (installedChanged)="onInstalled($event)"
              *ngIf="row.type !== 'adbutler'"
            ></app-install-software>
          </mat-cell>
        </ng-container>

        <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
        <mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>
      </mat-table>
    </div>
  </div>
</div>
